import G6 from "@antv/g6";

import { emitter } from "@/utils/mitt";
import { edgeOptions } from "./state";
import { registerIcon } from "./customShape";
import { createMenu } from "./plugin";
import { handleBuildObject } from "./menuEvent";

export const colorList = [
  "rgb(158, 213, 255)",
  "rgb(44, 150, 230)",
  "rgb(38, 175, 155)",
  "rgb(139, 232, 203)",
  "rgb(153, 204, 73)",
  "rgb(255, 220, 102)",
  "rgb(250, 194, 10)",
  "rgb(242, 145, 3)",
  "rgb(252, 134, 176)",
  "rgb(246, 111, 106)",
  "rgb(114, 112, 217)",
];

export let graph = null;

export const initGraph = (graphData) => {
  G6.Util.processParallelEdges(graphData.edges);
  const container = document.getElementById("container");
  const width = container.clientWidth || 1710;
  const height = container.clientHeight || 865;
  //创建菜单
  const menu = createMenu();
  //注册icon
  registerIcon();
  const grid = new G6.Grid();
  graph = new G6.Graph({
    container: container,
    width,
    height,
    modes: {
      default: [
        "zoom-canvas",
        "drag-canvas",
        "drag-node",
        {
          type: "brush-select",
          trigger: "ctrl",
          brushStyle: {
            fill: "rgba(227,228,220,0.5)",
          },
        },
        {
          type: "create-edge",
          trigger: "click",
          key: "shift",
          edgeConfig: {
            style: {
              stroke: "rgb(153,153,153)",
              lineWidth: 2,
              lineAppendWidth: 4,
            },
            labelCfg: {
              style: {
                fill: "#fff",
                background: {
                  fill: "#ccc",
                  padding: [2, 2, 3, 2],
                  radius: 2,
                },
              },
              autoRotate: true,
            },
            stateStyles: edgeOptions(),
            label: "relation",
            labelName: "relation",
          },
        },
      ],
    },
    defaultNode: {
      size: 20,
      type: "circle",
      style: {
        stroke: "",
        lineWidth: 2,
      },
      labelCfg: {
        style: {
          fontSize: 14,
          fontWeight: 500,
          background: {
            padding: [2, 2, 2, 2],
            radius: 2,
          },
        },
        position: "bottom",
      },
    },
    defaultEdge: {
      style: {
        stroke: "rgb(153,153,153)",
        lineWidth: 2,
        endArrow: true,
        lineAppendWidth: 4,
      },
      labelCfg: {
        style: {
          fill: "#fff",
          background: {
            fill: "#ccc",
            padding: [2, 2, 3, 2],
            radius: 2,
          },
        },
        autoRotate: true,
      },
    },
    plugins: [menu, grid],
    enabledStack: true,
    layout: {
      type: "gForce",
      animate: true,
      preventOverlap: true,
      nodeSize: 40,
      linkDistance: 200,
      nodeSpacing: 20,
      // linkDistance: 50, // 可选，边长
      // nodeStrength: 30, // 可选
      // edgeStrength: 0.1,
    },
  });

  graph.read(graphData);

  graph.on("canvas:dblclick", handleBuildObject);
  // 鼠标进入节点
  graph.on("node:mouseenter", (e) => {
    // console.log(e, "node:mouseenter");
    const nodeItem = e.item; // 获取鼠标进入的节点元素对象
    graph.setItemState(nodeItem, "hover", true); // 设置当前节点的 hover 状态为 true
  });
  // // 鼠标离开节点
  graph.on("node:mouseleave", (e) => {
    // console.log(e, "node:mouseleave");
    const nodeItem = e.item; // 获取鼠标离开的节点元素对象
    graph.setItemState(nodeItem, "hover", false); // 设置当前节点的 hover 状态为 false
  });

  // 鼠标进入节点
  graph.on("edge:mouseenter", (e) => {
    const edgeItem = e.item; // 获取鼠标进入的节点元素对象
    graph.setItemState(edgeItem, "selected", true); // 设置当前节点的 hover 状态为 true
  });
  // // 鼠标离开节点
  graph.on("edge:mouseleave", (e) => {
    const edgeItem = e.item; // 获取鼠标离开的节点元素对象
    graph.setItemState(edgeItem, "selected", false); // 设置当前节点的 hover 状态为 false
  });
  graph.on("edge:click", (e) => {
    const edgeItem = e.item; // 获取鼠标进入的节点元素对象
    graph.setItemState(edgeItem, "active", true); // 设置当前节点的 hover 状态为 true
  });

  graph.on("edge:dblclick", (e) => {
    emitter.emit("handleTologyLineEdit", e);
  });

  // //鼠标单击节点
  graph.on("node:click", (evt) => {
    const { item } = evt;
    graph.setAutoPaint(false);
    graph.getNodes().forEach((node) => {
      graph.clearItemStates(node);
      graph.setItemState(node, "dark", true);
    });
    graph.getEdges().forEach((edge) => {
      graph.clearItemStates(edge);
      graph.setItemState(edge, "lineDark", true);
    });

    graph.setItemState(item, "dark", false);
    graph.setItemState(item, "highlight", true);
    // graph.getEdges().forEach(function (edge) {
    //   if (edge.getSource() === item) {
    //     graph.setItemState(edge.getTarget(), "dark", false);
    //     graph.setItemState(edge.getTarget(), "highlight", true);
    //     graph.setItemState(edge, "lineDark", false);
    //     graph.setItemState(edge, "highlight", true);
    //     edge.toFront();
    //   } else if (edge.getTarget() === item) {
    //     graph.setItemState(edge.getSource(), "dark", false);
    //     graph.setItemState(edge.getSource(), "highlight", true);
    //     graph.setItemState(edge, "lineDark", false);
    //     graph.setItemState(edge, "highlight", true);
    //     edge.toFront();
    //   } else {
    //     graph.setItemState(edge, "highlight", false);
    //     graph.setItemState(edge, "lineDark", true);
    //   }
    // });
    graph.paint();
    graph.setAutoPaint(true);
  });

  graph.on("node:dblclick", (evt) => {
    emitter.emit("handleTologyEdit", evt);
  });

  graph.on("canvas:click", clearAllStats);

  graph.on("aftercreateedge", () => {
    const edges = graph.save().edges;
    G6.Util.processParallelEdges(edges);
    graph.getEdges().forEach((edge, i) => {
      graph.updateItem(edge, {
        curveOffset: edges[i].curveOffset,
        curvePosition: edges[i].curvePosition,
      });
    });
  });

  if (typeof window !== "undefined") {
    window.onresize = () => {
      if (!graph || graph.get("destroyed")) return;
      const container = document.getElementById("container");
      if (!container) return;
      graph.changeSize(container.clientWidth, container.clientHeight);
    };
  }

  return graph;
};
export const clearAllStats = () => {
  graph.setAutoPaint(false);
  graph.getNodes().forEach((node) => {
    graph.clearItemStates(node);
  });
  graph.getEdges().forEach((edge) => {
    graph.clearItemStates(edge);
  });
  graph.paint();
  graph.setAutoPaint(true);
};

export const setAllStateDark = () => {
  clearAllStats();
  graph.setAutoPaint(false);
  graph.getNodes().forEach((node) => {
    graph.setItemState(node, "dark", true);
  });
  graph.getEdges().forEach((edge) => {
    graph.setItemState(edge, "lineDark", true);
  });
  graph.paint();
  graph.setAutoPaint(true);
};
